<template>
  <view class="list-components">
    <view class="left-box">
      <image :src="showData.appLogo" class="icon-style" mode="scaleToFill" />
    </view>
    <view class="right-box">
      <view class="titile">{{ showData.appName }}</view>
      <view class="company"
        >广州唯品会电子商务有限公司
        <text class="iconfont icon-weibiaoti--10"></text>
      </view>
      <view class="tags">
        <text v-for="(item, index) in showData.tags" :key="index">{{
          item
        }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "",
  props: {
    showData: {
      type: Object,
      default: () => {
        return {
          appName: "唯品会",
          appLogo: "/static/dataImage/weipinhui/icon.webp",
          tags: ["综合商城", "在线商城", "时尚购物"],
        };
      },
    },
  },
  components: {},
  setup() {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.list-components {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 15rpx;
  background: #fff;
  .left-box {
    width: 130rpx;
    height: 130rpx;
    overflow: hidden;
    border-radius: 10rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .right-box {
    flex: 1;
    margin-left: 20rpx;
    .titile {
      font-size: 30rpx;
      font-weight: 500;
    }
    .company {
      font-size: 24rpx;
      color: #999;
      margin-top: 6rpx;
      .iconfont {
        display: inline-block;
        transform: rotate(180deg);
        font-size: 20rpx;
        color: #999;
      }
    }
    .tags {
      display: flex;
      font-size: 20rpx;
      color: #4ca176;
      text-align: center;
      margin-top: 10rpx;
      text {
        margin-right: 10rpx;
        background: #e5f5f0;
        padding: 5rpx 10rpx;
        border-radius: 5rpx;
      }
    }
  }
}
</style>
